<template>
  <div class="app-container">
    <el-form :model="detailForm" ref="detailForm" label-width="158px">
      <el-card class="box-card">
        <div slot="header">
          <span>询价单审批流程</span>

        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" style="display: flex;justify-content: space-between;">
          <span>基础信息</span>
          <el-button>下载车辆相关信息</el-button>
        </div>
        <el-row>
          <el-col :span="8" v-if="isShow">
            <el-form-item label="车辆总台数:">
              <el-input v-if="isEdit" v-model="detailForm.jq_insuranceSupplier"></el-input>
              <span>{{detailForm.jq_insuranceSupplier}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="isShow">
            <el-form-item label="合同禀议内保险总金额:">
              <el-input v-if="isEdit" v-model="detailForm.jq_insuranceSupplier"></el-input>
              <span>{{detailForm.jq_insuranceSupplier}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="isShow">
            <el-form-item label="合同禀议号:">
              <el-input v-if="isEdit" v-model="detailForm.jq_insuranceSupplier"></el-input>
              <span>{{detailForm.jq_insuranceSupplier}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="isShow">
            <el-form-item label="合同采购号:">
              <el-input v-if="isEdit" v-model="detailForm.jq_insuranceSupplier"></el-input>
              <span>{{detailForm.jq_insuranceSupplier}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="isShow">
            <el-form-item label="保险起期:">
              <el-input v-if="isEdit" v-model="detailForm.jq_insuranceSupplier"></el-input>
              <span>{{detailForm.jq_insuranceSupplier}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="isShow">
            <el-form-item label="合计费用:">
              <el-input v-if="isEdit" v-model="detailForm.jq_insuranceSupplier"></el-input>
              <span>{{detailForm.jq_insuranceSupplier}}</span>
            </el-form-item>
          </el-col>

        </el-row>
      </el-card>

      <el-card class="box-card">
        <div slot="header">
          <span>交强险信息</span>
        </div>
        <el-row>
          <el-col :span="8" v-if="isShow">
            <el-form-item label="租赁禀议保险公司:">
              <el-input v-model="detailForm.jq_rentInsuranceCompany" v-if="isEdit"></el-input>
              <span v-else>{{detailForm.jq_rentInsuranceCompany}}</span>
            </el-form-item>

          </el-col>

          <el-col :span="8" v-if="isShow">
            <el-form-item label="我司投保供应商:">
              <el-select v-model="detailForm.jq_insuranceType" v-if="isEdit" style="width: 100%;">
                <el-option label="是" value="1">
                </el-option>
                <el-option label="否" value="2">
                </el-option>

              </el-select>

              <span v-else></span>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="isShow">
            <el-form-item label="交强险公司:">
              <el-input v-model="detailForm.jq_rentInsuranceCompany" v-if="isEdit"></el-input>
              <span v-else>{{detailForm.jq_rentInsuranceCompany}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="isShow">
            <el-form-item label="交强险公司编码:">
              <el-input v-model="detailForm.jq_rentInsuranceCompany" v-if="isEdit"></el-input>
              <span v-else>{{detailForm.jq_rentInsuranceCompany}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="isShow">

            <el-form-item label="预计交强险开始日期:">
              <el-date-picker v-model="detailForm.jq_actualBeginTime" type="datetime" placeholder="" v-if="isEdit"
                value-format='yyyy-MM-dd HH:mm:ss' style="width: 100%;">
              </el-date-picker>
              <span v-else>{{detailForm.jq_policyCode}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="isShow">
            <el-form-item label="预计交强险结束日期:">
              <el-date-picker v-model="detailForm.jq_actualBeginTime" type="datetime" placeholder="" v-if="isEdit"
                value-format='yyyy-MM-dd HH:mm:ss' style="width: 100%;">
              </el-date-picker>
              <span v-else>{{detailForm.jq_policyCode}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="isShow">
            <el-form-item label="交强险性质:">
              <el-select v-model="detailForm.jq_insuranceType" v-if="isEdit" style="width: 100%;">
                <el-option label="运营" value="1">
                </el-option>
                <el-option label="非运营" value="2">
                </el-option>
              </el-select>
              <span v-else>{{ detailForm.jq_insuranceType == '1' ? '运营' : '非运营' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="isShow">
            <el-form-item label="交强险保费:">
              <el-input v-model="detailForm.jq_insuranceAmount" v-if="isEdit"></el-input>
              <span v-else>{{detailForm.jq_insuranceAmount}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="isShow">
            <el-form-item label="车船税是否缴纳:">
              <el-radio-group v-model="detailForm.jq_carTaxStatus" v-if="isEdit">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
              <span v-else>{{detailForm.jq_carTaxStatus == '1' ? '是' : '否'}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="isShow">
            <el-form-item label="车船税:">
              <el-input v-model="detailForm.jq_carTax" v-if="isEdit"></el-input>
              <span v-else>{{detailForm.jq_carTax}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card">
        <div slot="header">
          <span>商业险信息</span>
        </div>
        <el-row>
          <el-col :span="8" v-if="isShow">
            <el-form-item label="租赁禀议保险公司:">
              <el-input v-model="detailForm.jq_rentInsuranceCompany" v-if="isEdit"></el-input>
              <span v-else>{{detailForm.jq_rentInsuranceCompany}}</span>
            </el-form-item>

          </el-col>

          <el-col :span="8" v-if="isShow">
            <el-form-item label="我司投保供应商:">
              <el-select v-model="detailForm.jq_insuranceType" v-if="isEdit" style="width: 100%;">
                <el-option label="是" value="1">
                </el-option>
                <el-option label="否" value="2">
                </el-option>

              </el-select>

              <span v-else></span>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="isShow">
            <el-form-item label="商业险公司:">
              <el-input v-model="detailForm.jq_rentInsuranceCompany" v-if="isEdit"></el-input>
              <span v-else>{{detailForm.jq_rentInsuranceCompany}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="isShow">
            <el-form-item label="商业险公司编码:">
              <el-input v-model="detailForm.jq_rentInsuranceCompany" v-if="isEdit"></el-input>
              <span v-else>{{detailForm.jq_rentInsuranceCompany}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="isShow">

            <el-form-item label="预计商业险开始日期:">
              <el-date-picker v-model="detailForm.jq_actualBeginTime" type="datetime" placeholder="" v-if="isEdit"
                value-format='yyyy-MM-dd HH:mm:ss' style="width: 100%;">
              </el-date-picker>
              <span v-else>{{detailForm.jq_policyCode}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="isShow">
            <el-form-item label="预计商业险结束日期:">
              <el-date-picker v-model="detailForm.jq_actualBeginTime" type="datetime" placeholder="" v-if="isEdit"
                value-format='yyyy-MM-dd HH:mm:ss' style="width: 100%;">
              </el-date-picker>
              <span v-else>{{detailForm.jq_policyCode}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="isShow">
            <el-form-item label="商业险性质:">
              <el-select v-model="detailForm.jq_insuranceType" v-if="isEdit" style="width: 100%;">
                <el-option label="运营" value="1">
                </el-option>
                <el-option label="非运营" value="2">
                </el-option>
              </el-select>
              <span v-else>{{ detailForm.jq_insuranceType == '1' ? '运营' : '非运营' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card">

        <div slot="header" style="display: flex;justify-content: space-between;">
          <span>保险套餐</span>
          <el-form-item label="商业险合计费用:">
            <el-input v-model="detailForm.jq_rentInsuranceCompany" v-if="isEdit"></el-input>
            <span v-else>{{detailForm.jq_policyCode}}</span>
          </el-form-item>
        </div>
        <el-row>
          <el-col>
            <el-table :data="businessVoList" border size='mini'>
              <el-table-column align="center" prop="name" label="商业险种"></el-table-column>
              <el-table-column align="center" prop="title" label="保额/万元"></el-table-column>
              <el-table-column align="center" label="保险费用/元" prop="inputRow">
              </el-table-column>
            </el-table>

          </el-col>
        </el-row>
      </el-card>


        <div slot="header">
          <span>车辆录入保险价格明细</span>
        </div>
        <el-row>
          <el-col>
            <el-table :data="tableList" border size='mini'>
              <el-table-column align="center" prop="cj" label="车架号"></el-table-column>
              <el-table-column align="center" label="车船税">
                <template slot-scope="{row}">
                  <el-input v-model="row.cc"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="title" label="交强险保费">
                <template slot-scope="{row}">
                  <el-input v-model="row.jqbx"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="title" label="商业险合计费用">
                <template slot-scope="{row}">
                  <el-input v-model="row.syhj"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="商业险">
                <el-table-column align="center" prop="title" label="车辆损失险">
                  <template slot-scope="{row}">
                    <el-input v-model="row.s1"></el-input>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="title" label="第三者责任险">
                  <template slot-scope="{row}">
                    <el-input v-model="row.s2"></el-input>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="title" label="乘客险保额">
                  <template slot-scope="{row}">
                    <el-input v-model="row.s3"></el-input>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="title" label="司机险保额">
                  <template slot-scope="{row}">
                    <el-input v-model="row.s4"></el-input>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" label="其他保险">
                <el-table-column align="center" label="险种类别1">
                  <template slot-scope="{row}">
                    <el-input v-model="row.qtq1"></el-input>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="title" label="险种类别2">
                  <template slot-scope="{row}">
                    <el-input v-model="row.qtq2"></el-input>
                  </template>
                </el-table-column>

              </el-table-column>
            </el-table>

          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header">
          <span>备注</span>
        </div>

        <el-row>
          <el-col v-if="isShow">
            <el-form-item label="投保单:">
              <fileUpload />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>

          <el-col v-if="isShow">
            <el-form-item label="备注:">
              <el-input v-model="detailForm.jq_insuranceAmount" v-if="isEdit" type="textarea"></el-input>
              <pre v-else>{{detailForm.jq_insuranceAmount}}</pre>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

    </el-form>
  </div>
</template>

<script>
  // import {
  //   getInsuranceDetails,
  //   updateInsurance
  // } from "@/api/bxgl/insureManageApi.js";
  import {
    getToken
  } from "@/utils/auth";



  export default {
    dicts: ['business_type'],
    name: "insuranceInquiryDetails",
    components: {},

    data() {
      return {
        tableList: [{
          cj: "29292",
          cc: "100",
          jqbx: "1000",
          syhj: "1000",
          s1: 100,
          s2: 200,
          s3: 100,
          s4: 200,
          qtq1: 300,
          qtq2: 200,
        }],
        businessVoList: [{
          name: '王玉',
          title: "100",
          inputRow: "20"
        }],
        manageVos: [],


        routeQuery: {},
        activeName: 'first',
        insureDetailList: [{
            insuranceType: "强盗险",
            coverage: "50",
            InsuranceCosts: "40"
          },
          {
            insuranceType: "车辆损失险",
            coverage: "100",
            InsuranceCosts: "100"
          },

          {
            insuranceType: "第三者责任险",
            coverage: "60",
            InsuranceCosts: "60"
          },

          {
            insuranceType: "乘客险保额",
            coverage: "60",
            InsuranceCosts: "60"
          },

          {
            insuranceType: "司机险保额",
            coverage: "60",
            InsuranceCosts: "60"
          },

          {
            insuranceType: "划痕险",
            coverage: "60",
            InsuranceCosts: "60"
          },

          {
            insuranceType: "其他险种",
            coverage: "60",
            InsuranceCosts: "60"
          },
        ],
        insureCol: [{
            prop: "businessName",
            label: "商业险种",
          },
          {
            prop: "insurancePrice",
            label: "保额/万元",
          },
          {
            prop: "insuranceQuota",
            label: "保险费用/元",

          },

        ],
        historyList: [],
        historyCol: [{
            prop: "carNo",
            label: "交强险保险公司",
          },
          {
            prop: "vinNo",
            label: "交强险保单号",
          },
          {
            prop: "brandName",
            label: "交强险开始时间",

          },

          {
            prop: "modelName",
            label: "交强险结束时间",

          },
          {
            prop: "seriesName",
            label: "交强险费用",
          },
          {

            label: "备注",
            prop: "businessType",
          },
          {
            prop: "seriesName",
            label: "保单时效",
          },
          {

            label: "记录时间",
            prop: "businessType",
          },


        ],

        dataList: [],

        // 表单参数
        detailForm: {

        },
        // 交强险1
        compulsoryForm: {},
        // 商业险2
        commercialForm: {},
      };
    },
    watch: {
      '$route': {
        handler(val, oldVal) {

          if (val.query) {

            // if (val.query.type == '2') {
            //   this.isEdit = true
            // } else {
            //   this.isEdit = false
            // }
          }
        },
        // 深度观察监听
        deep: true,

      }

    },
    computed: {
      isShow() {

        return true

      },
      isEdit() {

        return true

      },
      dictsName() {
        return (arr, type) => {
          let name = ""
          arr.map((v) => {
            if (type == v.value) {
              name = v.label
            }
          })
          return name
        }
      },
      rowManage() {
        return (arr, type) => {
          let obj = {}
          let arri = []
          arri = arr.filter((v) => {
            return v.type == type
          })
          return obj = arri[0] || {}
        }
      },
    },
    created() {

      this.routeQuery = this.$route.query

      // if (this.routeQuery.type == '2') {
      //   this.isEdit = true
      // } else {
      //   this.isEdit = false
      // }

      // this.getBrandNames()
      // this.insuranceDetails();
    },
    mounted() {

    },
    methods: {}
  };
</script>


<style lang="scss" scoped>
  .box-card {
    font-size: 14px;
    margin-bottom: 20px;

    .box-card-inp {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .inp-name {
        width: 130px;
        text-align: right;
        font-size: 14px;
      }

      .inp-name-r {
        flex: 1;
      }
    }

    .top-card {
      display: flex;

      .top-card-right {
        flex: 1;
        font-size: 14px;
        line-height: 36px;
        margin-left: 20px;
      }
    }
  }

  // .form-dialog {
  //   ::v-deep .el-dialog__header {
  //     padding: 10px 20px;
  //     border-bottom: 1px solid #DCDFE6;

  //     .el-dialog__headerbtn {
  //       top: 15px;
  //     }
  //   }

  // .box-card {
  //   margin-bottom: 20px;

  //   .card-title {
  //     font-size: 16px;
  //     position: relative;
  //     margin-left: 8px;
  //     padding: 0;
  //   }

  //   .card-title::after {
  //     content: '';
  //     width: 4px;
  //     height: 18px;
  //     background-color: aqua;
  //     display: block;
  //     position: absolute;
  //     left: -12px;
  //     top: 2px;
  //   }
  // }

  // }
</style>
